<template>
	<view class="ruzu-container">
		<!-- 主要内容区域 -->
		<view class="main-content">
			<!-- 主标题 -->
			<!-- <view class="main-title">
				<text class="title-text">店铺入驻</text>
			</view> -->

			<!-- 步骤指示器 -->
			<view class="steps-container">
				<view class="step-item" :class="{ active: stepStatus === 'filling' }">
					<text class="step-text" :class="{ inactive: stepStatus === 'submitted' }">填写资质信息</text>
				</view>
				<view class="step-item" :class="{ active: stepStatus === 'submitted' }">
					<text class="step-text" :class="{ inactive: stepStatus === 'filling' }">提交审核</text>
				</view>
			</view>

			<!-- 按钮区域 -->
			<view class="button-container">
				<button class="primary-btn" @click="startFilling">
					<text class="btn-text">开始填写</text>
				</button>
				<button class="secondary-btn" @click="viewAgreement">
					<text class="btn-text">查看店铺入驻协议</text>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				stepStatus: 'filling' // 'filling' 或 'submitted'
			}
		},
		onLoad() {
			// 初始化全局状态
			const app = getApp()
			if (!app.globalData) {
				app.globalData = {}
			}
			if (!app.globalData.stepStatus) {
				app.globalData.stepStatus = 'filling'
			}
			this.stepStatus = app.globalData.stepStatus
		},
		onShow() {
			// 页面显示时检查全局状态
			const app = getApp()
			if (app.globalData && app.globalData.stepStatus) {
				this.stepStatus = app.globalData.stepStatus
			}
		},
		methods: {
			// 开始填写
			startFilling() {
				uni.navigateTo({
					url: '/pages/ruzhuxinxi/ruzhuxinxi'
				})
			},
			
			// 查看协议
			viewAgreement() {
				uni.navigateTo({
					url: '/pages/ruzhuxieyi/ruzhuxieyi'
				})
			}
		}
	}
</script>

<style scoped>
	.ruzu-container {
		background-color: #fff;
		min-height: 100vh;
		padding-bottom: env(safe-area-inset-bottom);
	}

	/* 主要内容区域 */
	.main-content {
		padding: 80rpx 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* 主标题 */
	.main-title {
		margin-bottom: 80rpx;
		text-align: center;
	}

	.main-title .title-text {
		font-size: 52rpx;
		font-weight: 700;
		color: #333;
	}

	/* 步骤指示器 */
	.steps-container {
		display: flex;
		flex-direction: column;
		gap: 50rpx;
		width: 100%;
		margin-bottom: 120rpx;
		align-items: center;
	}

	.step-item {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.step-text {
		font-size: 36rpx;
		color: #ff6b6b;
		font-weight: 600;
		background-color: #fff2f0;
		padding: 30rpx 40rpx;
		border-radius: 12rpx;
		text-align: center;
		transition: all 0.3s ease;
	}

	.step-text.inactive {
		color: #333;
		background-color: transparent;
		padding: 30rpx 40rpx;
		font-size: 36rpx;
		font-weight: 600;
	}

	/* 按钮区域 */
	.button-container {
		display: flex;
		flex-direction: column;
		gap: 40rpx;
		width: 100%;
		align-items: center;
	}

	.primary-btn {
		background-color: #ff6b6b;
		color: #fff;
		border: none;
		border-radius: 12rpx;
		padding: 30rpx 0;
		font-size: 32rpx;
		font-weight: 600;
		transition: all 0.3s ease;
		box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.3);
		width: 100%;
		max-width: 500rpx;
	}

	.primary-btn:active {
		transform: scale(0.98);
		box-shadow: 0 2rpx 8rpx rgba(255, 107, 107, 0.4);
	}

	.secondary-btn {
		background-color: #fff;
		color: #333;
		border: 1rpx solid #ccc;
		border-radius: 12rpx;
		padding: 30rpx 0;
		font-size: 28rpx;
		font-weight: 500;
		transition: all 0.3s ease;
		width: 100%;
		max-width: 500rpx;
	}

	.secondary-btn:active {
		background-color: #f8f9fa;
		transform: scale(0.98);
	}

	.btn-text {
		display: block;
		text-align: center;
	}

	/* 响应式适配 */
	@media screen and (max-width: 750rpx) {
		.main-content {
			padding: 60rpx 30rpx;
		}
		
		.main-title {
			margin-bottom: 60rpx;
		}
		
		.main-title .title-text {
			font-size: 48rpx;
		}
		
		.steps-container {
			gap: 40rpx;
			margin-bottom: 100rpx;
		}
		
		.step-text {
			font-size: 34rpx;
			padding: 28rpx 35rpx;
		}
		
		.step-text.inactive {
			font-size: 34rpx;
			padding: 28rpx 35rpx;
		}
		
		.primary-btn {
			padding: 28rpx 0;
			font-size: 30rpx;
			max-width: 450rpx;
		}
		
		.secondary-btn {
			padding: 28rpx 0;
			font-size: 26rpx;
			max-width: 450rpx;
		}
	}

	@media screen and (max-width: 600rpx) {
		.main-content {
			padding: 50rpx 25rpx;
		}
		
		.main-title {
			margin-bottom: 50rpx;
		}
		
		.main-title .title-text {
			font-size: 44rpx;
		}
		
		.steps-container {
			gap: 35rpx;
			margin-bottom: 80rpx;
		}
		
		.step-text {
			font-size: 32rpx;
			padding: 25rpx 30rpx;
		}
		
		.step-text.inactive {
			font-size: 32rpx;
			padding: 25rpx 30rpx;
		}
		
		.primary-btn {
			padding: 25rpx 0;
			font-size: 28rpx;
			max-width: 400rpx;
		}
		
		.secondary-btn {
			padding: 25rpx 0;
			font-size: 24rpx;
			max-width: 400rpx;
		}
	}
</style>
